<template>
  <div :class="{'theme-market': showMarketingBar}">
    <section class="c-p c-maxh427 c-text-hidden">
      <img class="c-w100" :src="$addXossFilter(clockInInfo.cover, require('@/assets/defult270.png'))" alt="" />
    </section>
    <!-- 营销活动倒计时 -->
    <flash-sales-time-new v-if="showMarketingBar"
      :type="clockInInfo.sales? 'isSale':clockInInfo.isFriendHelper ? 'isFa' : clockInInfo.bargain ? 'isBargain' : 'isCollage'"
      :price="clockInInfo.sales ? clockInInfo.sales.price : clockInInfo.collage ? clockInInfo.collage.captainPrice : clockInInfo.bargain ? clockInInfo.bargain.reservePrice : ''"
      :from="clockInInfo.collage && clockInInfo.collage.collageGroupType && clockInInfo.collage.collageGroupType == 2 ? 'activity' : ''"
      :startTime="clockInInfo.sales ? clockInInfo.sales.sales.startTime : clockInInfo.bargain ? clockInInfo.bargain.startTime : clockInInfo.collage ? clockInInfo.collage.startTime : clockInInfo.faStartAt"
      :endTime="clockInInfo.sales ? clockInInfo.sales.sales.endTime : clockInInfo.bargain ? clockInInfo.bargain.endTime : clockInInfo.collage ? clockInInfo.collage.endTime : clockInInfo.faEndAt"
      :originalPrice="clockInInfo.price"
      :stock="clockInInfo.sales ? clockInInfo.sales.balance: ''"
      :stockBargain="clockInInfo.bargain && clockInInfo.bargain.stock"
      :isLimit="clockInInfo.sales && clockInInfo.sales.limit == 0 || (clockInInfo.bargain && clockInInfo.bargain.isLimitStock == 2) ? false : true" :salesTag="clockInInfo.sales && clockInInfo.sales.sales.tags"
      :peopleNum="clockInInfo.collage && clockInInfo.collage.peopleNum"
      :isPreheat="clockInInfo.bargain && clockInInfo.bargain.isPreheat"
      :bargainStatus="clockInInfo.bargain && clockInInfo.bargain.status"
      :optimal="optimal"
      @showCoupon="showCoupon = true"
      @falshSalesTime="falshSalesTime"
      @finishFlashSales="finishFlashSales"
    >
    </flash-sales-time-new>
    <section class="c-p" v-if="clockInInfo != ''">
      <div class="c-bd-b12-f5 c-mt24">
        <price-bar class="c-ph0 c-mt20" v-if="!(clockInInfo.sales || (clockInInfo.bargain && ((clockInInfo.bargain.status == 1 && clockInInfo.bargain.isPreheat == 1) || clockInInfo.bargain.status == 2)) || (clockInInfo.collage && (clockInInfo.collage.status == 2 || clockInInfo.collage.status == 1)) || clockInInfo.isFriendHelper) && !clockInInfo.hasPermission"
          :dataInfo="clockInInfo"
          :styleType="2"
          :isClock="1"
          :chainInfo="chainInfo"
        >
        </price-bar>
        <discount-info class="c-mt8" v-if="clockInInfo.payType == 2&&activityList.length == 0 && !isiOS && !clockInInfo.hasPermission && clockInInfo.isSaleOnly != 0"
          :couponList="couponList"
          :isMarketing="isMarketing"
          :dataInfo="clockInInfo"
          :chainInfo="chainInfo"
          @clickShowCoupon="showCoupon = true"
        >
        </discount-info>
        <div v-if="clockInInfo.payType == 2 && !clockInInfo.hasPermission && activityList.length == 0 && !$isWxAppIos() && !isiOS" class="c-mt20 c-ph24">
          <vip-entry
            :styleType="2"
            :dataInfo="clockInInfo"
          ></vip-entry>
        </div>
        <!-- 顶部的名字展示 -->
        <div class="c-ph24 c-mt24">
          <div class="c-fs30 c-fc-xblack c-fw600">{{clockInInfo.name}}</div>
        </div>
        <!-- 顶部的一些杂乱信息展示 -->
        <div class="c-ph24 c-flex-row c-justify-sb c-pt20 c-aligni-center" v-if="(clockInInfo.type == 3 || (clockInInfo.type == 1 && clockInInfo.supplyNum * 1 > 0))">
          <div class="c-fs18 c-fc-xblack c-flex-row c-aligni-center">
            <div class="c-flex-row c-aligni-center">
              <div class="c-mr20">说明:</div>
              <div v-if="clockInInfo.type == 3">每天可打卡{{clockInInfo.daySignNum}}课，有效期{{clockInInfo.limitDay}}天</div>
              <div v-if="clockInInfo.type == 1 && clockInInfo.supplyNum * 1 > 0">可补打卡{{clockInInfo.supplyNum}}天，每日{{clockInInfo.startHour}}至{{clockInInfo.endHour}}可打卡</div>
            </div>
          </div>
        </div>
        <!-- 顶部的一些杂乱信息展示 -->
        <div class="c-ph24 c-pb20 c-pt20">
          <div class="c-fs18 c-fc-gray c-flex-row c-aligni-center">
            <div class="c-flex-row c-aligni-center">
              <div class="icon iconfont c-fs18 c-mr4 c-mt2">&#xe69c;</div>
              {{clockInInfo.type == 1?(clockInInfo.timeType==2?'打卡周期:'+clockInInfo.startTime+'开始，'+clockInInfo.allDay+'天/周期':
                '共'+clockInInfo.allDay+'天,打卡周期:'+clockInInfo.startTime+'至'+clockInInfo.endTime):
                clockInInfo.type == 2?'共'+clockInInfo.hasCourse+'个作业':
                clockInInfo.type == 3?'课时总数:'+clockInInfo.workNum+'课时':''}}
            </div>
            <div v-if="enableShowModuleView == 1 || !(enableHiddenModules && enableHiddenModules.includes(cfrom.clockIn))" class="c-flex-row c-aligni-center c-ml16" >
              <div class="icon iconfont c-fs18 c-mr4">&#xe62a;</div>
              {{clockInInfo.hasMan}}人参与
            </div>
          </div>
          <div class="c-fs18 c-fc-gray c-flex-row c-aligni-center c-pt10" v-if="clockInInfo.hasPermission">
            <div class="icon iconfont c-fs18 c-mr4 c-mt2">&#xe70f;</div>
            有效期:{{clockInInfo.validAt&&clockInInfo.validAt!=''?clockInInfo.validAt:'长期有效'}}
          </div>
        </div>
        <div class="c-ph24 c-pb20" v-if="clockInInfo.payType == 4 && !$isWxAppIos()">
          <div class="theme-bg-10 c-br8 c-pv10 c-ph10 c-flex-row c-aligni-center" >
            <div class="c-flex-row c-aligni-center c-fs20 c-fc-white theme-bg-gradient c-br8 c-ph10 c-pv4" @click="clickGoRules">
              <div class="iconfont c-fc-white c-fs32 c-mr4">&#xe746;</div>
              奖学金模式
              <div class="iconfont c-fc-white c-fs32 c-ml4">&#xe669;</div>
            </div>
            <div class="c-fs20 theme-fc c-ml10" v-if="clockInInfo.type == 1">
              坚持打卡，赢奖金平分
            </div>
            <div class="c-fs20 theme-fc c-ml10 c-ww360" v-if="clockInInfo.type != 1">
              {{clockInInfo.limitDay+'天内学完'+ clockInInfo.workNum +'课时，可获得'}}<span class="c-fw600">{{clockInInfo.prize}}</span>元奖金
            </div>
          </div>
        </div>
        <!-- 引导入群 -->
        <invite-group class="c-pr24 c-pb20"
          v-if="showInviteGroup"
          :guideText="clockInInfo.guideData.guideDesc"
          @handleShowGuidePop="handleShowGuidePop"
        >
        </invite-group>
      </div>
      <div v-if="relationData&&relationData.datums&&relationData.datums.length>0&&!this.$isStore()" class="c-ph24 c-bd-b12-f5">
        <div class="c-flex-row c-aligni-center" v-if="relationData.datums" @click="showdatumModal=true">
          <div class="c-fc-xblack c-fs22 c-fw-b c-mr24">课件</div>
          <div class="c-w0 c-flex-grow1">
            <div class="c-flex-row c-aligni-center c-pv20">
              <div class="iconfont c-fs18 c-flex-row c-flex-center c-mr10 c-pt2">&#xe69c;</div>
              <div class="c-fs22 c-fc-xblack">资料下载</div>
              <div class="c-flex-grow1 c-flex-row c-aligni-center c-justify-end c-fs20 c-fc-gray" >
                共{{relationData.datums.length}}个文件
                <span class="iconfont c-fs14 c-fc-gray c-ml10 c-pt4">&#xe60e;</span>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="c-bd-b16 bargain-style c-ph24" v-if="clockInInfo.bargain != null && !clockInInfo.hasPermission">
        <bargain-rules :isPreheat="clockInInfo.bargain.isPreheat" :status="clockInInfo.bargain.status"></bargain-rules>
      </div>
      <!-- 非强制表单入口 -->
      <formEntry v-if="clockInInfo.hasPermission && (!clockInInfo.isTeacher&&((clockInInfo.collectPage==3&& clockInInfo.isRelForm == true && clockInInfo.hasFormLog == false && isShowFormlg)||(clockInInfo.hasFormLog&&clockInInfo.enableEdit==2&& isShowFormlg&& clockInInfo.isRelForm == true)))"
        relType="5"  :relId="clockInInfo.signColId"  :dataInfo="clockInInfo"
        classObject="c-fs22" fontSizeClass="c-fs20" iconSizeClass="c-fs14" topClass="c-bd-b12-f5"
        @goForm="goForm" ></formEntry>
      <collage-persons-list class="c-p c-bd-b16" v-if="clockInInfo && !clockInInfo.hasPermission && !clockInInfo.isEnroll && clockInInfo.collage && (clockInInfo.collage.status == 2 || clockInInfo.collage.status == 1) && typeBar == 0" :collage="clockInInfo.collage" @goCollageDetail="gcd"></collage-persons-list>
    </section>
    <section>
      <my-small-tabbar class="c-box-shadow10 c-ph24" :styleType="2" :isNew="true" :tabList="tabList" :tabIndex="typeBar" @changeTab="changeType"></my-small-tabbar>
    </section>
    <!-- 详情 -->
    <section v-show="typeBar == 0" class="c-fs24 c-pb108">
      <course-description
        class="c-ph24"
        ref="descriptions"
        :independentCopy="cfg.isCopy"
        :independentCopyPicture="cfg.isCopyPicture"
        :prodType="cfrom.clockIn"
        :prodId="cId"
      ></course-description>
      <commentCom ref="detailCommentCom" v-if="isShowComments('detail')&&!this.$isStore()" positionType="detail" :prodType="cfrom.clockIn" :prodId="cId" :bindPhoneSetting="bindPhoneSetting" @getCommentCount="getCommentCount" @addCommentSuccess="addCommentSuccess" @handleClickPlaint="handleClickPlaint"></commentCom>
    </section>
    <!-- 资料 -->
    <section v-show="typeBar == 1" class="c-pb28 rela-style">
      <active-and-column v-if="relationData" :datumList="relationData.datums"></active-and-column>
    </section>
    <!-- 评论 -->
    <div v-if="cfg.enableCommentTag == 1&&!this.$isStore()" v-show="typeBar == 2">
      <commentCom ref="commentCom" v-show="commentStatus == 1" :prodType="cfrom.clockIn" :prodId="cId" :bindPhoneSetting="bindPhoneSetting" @getCommentCount="getCommentCount" @addCommentSuccess="addCommentSuccess" @handleClickPlaint="handleClickPlaint"></commentCom>
      <div class="c-fs20 c-fc-red c-bg-white c-pf c-p-r0 c-p-b360 c-pv10 c-ph20 c-br36 c-br-br0 c-br-tr0 c-box-shadow" @click="showReport = true;" v-if="isiOS && companyId == 'ldwk'">
        <span class="iconfont c-fs20 c-fc-red c-mr12">&#xe7f6;</span>举报
      </div>
    </div>
    <section v-if="activityList.length > 0" class="c-pt30 c-pb40 c-bg-white c-bd-t16 c-ph24">
      <div>
        <span class="c-fs26 c-fw-b">配套课程</span>
        <span class="c-fs20 theme-fc c-pl20">{{activityList[0].permissionType == 2 ? '购买所属的活动并签到后可参与打卡':'购买所属的课程后可参与打卡'}}</span>
      </div>
      <div class="c-flex-row c-pt30" v-for="(item,index) in activityList" :key="index" @click="clickGoActivity(item.mainProdType, item.id)">
        <div class="c-ww150 c-hh75 c-text-hidden c-br8 c-p">
          <div class="c-pa c-p-t0 c-p-l0 c-br-br8 c-flex-row c-flex-center c-translucent-balck60 c-fc-white c-fs16 c-ph8 c-hh24">{{prodTypes[item.mainProdType]}}</div>
          <img :src="$addXossFilter(item.cover, require('@/assets/activity_defult.png'))" class="c-w100 c-br8" alt="">
        </div>
        <div class="c-flex-grow1 c-w0 c-flex-row c-aligni-center c-pb30 c-pl20" :class="index == activityList.length - 1? '':'c-bd-b1'">
          <div class="c-flex-grow1 c-w0 c-pr20 c-hh75 c-flex-column c-justify-sb">
            <div class="c-fs24 c-fw400 c-text-ellipsis1">
              {{item.name}}
            </div>
            <!-- isSaleOnly: 0 -->
            <!-- isSaleTogether: 1 -->
            <div class="theme-fc c-fs20 c-flex-row c-aligni-center" v-if="!item.isSaleOnly&&item.isSaleTogether">
              关联售卖
            </div>
            <div v-else>
              <!-- payType：付款类型【1：免费；2：收费；3：密码支付】 -->
              <div class="theme-fc c-fs20 c-flex-row c-aligni-center" v-if="prodTypes[item.mainProdType]=='直播'">
                <span v-if="item.payType == 2">{{'￥' | iosPriceFilter('Live')}}</span>
                <span>{{item.payType | priceValueFilter(item.price, item.prodType)}}</span>
              </div>
              <div class="theme-fc c-fs20 c-flex-row c-aligni-center" v-else>
                <span v-if="((item.price != '0.00~0.00') && (prodTypes[item.mainProdType] == '活动' && item.isShowPrice == 1) || prodTypes[item.mainProdType] != '活动')&&(item.payType && (item.payType == 2 || item.payType == 4))">{{'￥' | iosPriceFilter}}</span>
                <span v-if="(prodTypes[item.mainProdType] == '活动' && item.isShowPrice == 1) || prodTypes[item.mainProdType] != '活动'">{{item.payType||item.payType==2?item.payType==1?'免费':item.payType==3?'加密':item.price == '0.00~0.00' ? '免费' : item.price:item.price == '0.00~0.00' ? '免费' : item.price | moneyStr}}</span>
                <span class="c-ml16 c-br12 c-ph10 c-hh26 c-lh26 theme-bd1 c-fs16 c-inlineblack c-textAlign-c c-vcAlign-middle" v-if="item.vipMaxDiscount != null && prodTypes[item.mainProdType] == '活动'">会员减{{item.vipMaxDiscount}}元</span>
              </div>
            </div>
          </div>
          <i class="iconfont c-fs16 c-fc-sgray">&#xe85a;</i>
        </div>

      </div>
    </section>
    <section v-show="isShowComments('tag')" @click="addComment()" class="c-ph24 c-bg-white c-hh88 c-aligni-center c-flex-row c-pf c-w100 c-maxw640 c-p-b0 c-pz9 c-box-shadow5">
      <div class="c-hh60 c-w0 c-flex-grow1 c-lh64 c-textAlign-c c-fs24 c-ph20 c-fc-gray c-bg-f2 c-br30"> 请输入评论内容</div>
    </section>
    <bottom-buy-com
      @clickComment="addComment"
      :showCommentBtn="isShowComments('icon')&&!this.$isStore()"
      :isNeedPay="!clockInInfo.hasPermission && (clockInInfo.payType == 2 || clockInInfo.payType == 4 || clockInInfo.payType == 5)">
      <slot>
        <div class="btn-wrap c-fs28 c-lh c-w0 c-flex-grow1 c-flex-row">
          <template v-if="activityList.length == 0">
            <div v-if="clockInInfo.hasPermission&&clockInInfo.type==1&& clockInInfo.isTeacher == 0&&clockInInfo.timeType==2&&(clockInInfo.permissionType == 4||clockInInfo.permissionType == 7||clockInInfo.permissionType == 8||clockInInfo.permissionType == 20)"
              @click="clickShowBuyInfo" class="c-hh64 c-flex-row c-flex-center c-w0 c-flex-grow1">续费</div>
            <!-- 已购买 或 身份为教师 -->
            <div v-if="(clockInInfo.hasPermission && clockInInfo.isBuy == 1) || clockInInfo.isTeacher == 1 || clockInInfo.isTeacher == 2" @click="clickEnterCourse" class="theme-bg c-fc-white c-lh c-w0 c-flex-grow1 c-flex-row c-flex-center c-hh64 c-fs28">进入打卡</div>
            <!-- 有权限，未购买，已过期 或 ，没权限，已过期 -->
            <div v-else-if="(clockInInfo.isBuy == 0 && clockInInfo.isExpire == 1 && (clockInInfo.isTeacher != 1 || clockInInfo.isTeacher != 2))" class="c-bg-b3 c-fc-white c-lh c-w0 c-flex-grow1 c-flex-row c-flex-center c-hh64 c-fs28">已过期</div>
            <!-- 停售 -->
            <div v-else-if="clockInInfo.isSaleOut == 0 && !clockInInfo.hasPermission&&(clockInInfo.payType==2||clockInInfo.payType==4)" class="c-bg-d7 c-fc-white c-lh c-w0 c-flex-grow1 c-flex-row c-flex-center c-hh64 c-fs28">暂不支持售卖</div>
            <!-- 未购买，价格为0，没人数限制或有人数限制，人数还没超过上限-->
            <div v-else-if="!clockInInfo.hasPermission && clockInInfo.payType == 1 && ((clockInInfo.limitNum == 0 || clockInInfo.limitNum >0 && clockInInfo.hasMan < clockInInfo.limitNum))" @click="clickAddEnter(1)" class="theme-bg c-fc-white c-lh c-w0 c-flex-grow1 c-flex-row c-flex-center c-hh64 c-fs28">进入打卡</div>
            <!-- 未购买，需要输入密码进入 -->
            <div v-else-if="!clockInInfo.hasPermission && clockInInfo.payType == 3" class="c-w0 c-flex-grow1 c-flex-row c-hh64 c-fs24 c-text-hidden">
              <div @click="clickEnterExperienceLesson" v-if="clockInInfo.isExperienceLesson" class="c-ww180 c-bg-white theme-fc c-h c-flex-grow1 c-flex-row c-br-tl36 c-br-bl36 c-flex-center ">体验课</div>
              <div @click="clickPassword" :class="clockInInfo.isExperienceLesson ? 'c-br-tr36 c-br-br36':''" class="c-ww180 theme-bg c-flex-grow1 c-w0 c-fc-white c-h c-flex-row c-flex-center">输入密码</div>
            </div>
            <!-- 非拼团 未购买，需要付费进入，没人数限制或有人数限制，人数还没超过上限 -->
            <!-- <div v-else-if="" class="c-w0 c-flex-grow1 c-flex-row c-hh64 c-fs24 c-text-hidden"> -->
            <template class="c-hh64" v-else-if="isSales&&!clockInInfo.collage && !clockInInfo.bargain && !clockInInfo.hasPermission && (clockInInfo.payType == 2 || clockInInfo.payType == 4) && (clockInInfo.limitNum == 0 || clockInInfo.hasMan < clockInInfo.limitNum)">
              <div @click="clickEnterExperienceLesson" v-if="clockInInfo.isExperienceLesson" class="c-hh64 c-bg-white theme-fc c-h c-flex-row c-br-tl36 c-br-bl36 c-flex-center c-w50">体验课</div>
              <div @click="clickBuy" class="c-flex-grow1 c-w0 c-fc-white c-h c-flex-row c-flex-center c-hh64" :class="[clockInInfo.isExperienceLesson ? 'c-w50' : 'c-w100', showMarketingBar ? 'theme-bg-gradient' : 'theme-bg']">{{getBuyBtnTitle}}</div>
            </template>
            <template class="c-hh64" v-else-if="!isSales&&!clockInInfo.collage && !clockInInfo.bargain && !clockInInfo.hasPermission && (clockInInfo.payType == 2 || clockInInfo.payType == 4) && (clockInInfo.limitNum == 0 || clockInInfo.hasMan < clockInInfo.limitNum)">
              <div @click="clickEnterExperienceLesson" v-if="clockInInfo.isExperienceLesson" class="c-hh64 c-bg-white theme-fc c-h c-flex-row c-br-tl36 c-br-bl36 c-flex-center" :class="clockInInfo.isFriendHelper ? 'c-w33' : 'c-w50'">体验课</div>
              <div class="c-ph20 c-flex-row c-flex-center c-w33 c-bd-l0 c-hh64" v-if="clockInInfo.isFriendHelper && clockInInfo.isExperienceLesson" @click="goHelpDetail()">助力领取</div>
              <div class="c-flex-row c-flex-center c-w50 c-br-bl36 c-br-tl36 c-hh64" v-if="clockInInfo.isFriendHelper && !clockInInfo.isExperienceLesson" @click="goHelpDetail()">助力领取</div>
              <div @click="clickBuy" class="c-flex-grow1 c-w0 c-fc-white c-h c-flex-column c-flex-center c-hh64" :class="[clockInInfo.isExperienceLesson && clockInInfo.isFriendHelper ? 'c-w33' : clockInInfo.isFriendHelper || clockInInfo.isExperienceLesson ? 'c-w50' : 'c-ww180 c-fs28', showMarketingBar ? 'theme-bg-gradient' : 'theme-bg']">
                <!-- <span class="c-fs22 c-lh">{{'￥' | iosPriceFilter}}{{calculationPrice}}</span> -->
                <span>{{getBuyBtnTitle}}</span>
              </div>
            </template>
            <!-- </div> -->
            <!-- 拼团 未购买，需要付费进入，没人数限制或有人数限制，人数还没超过上限 -->
            <div class="c-w0 c-flex-grow1 c-flex-row" v-else-if="clockInInfo.collage&&clockInInfo.collage.userType == -1 && !clockInInfo.hasPermission && (clockInInfo.payType == 2 || clockInInfo.payType == 4) && (clockInInfo.limitNum == 0 || clockInInfo.hasMan < clockInInfo.limitNum)">
              <div class="c-w0 c-flex-grow1 c-flex-row c-hh64 c-br36 c-fs24 c-text-hidden" v-if="clockInInfo.collage.userType == -1">
                <div @click="clickBuy" class="c-bg-white theme-fc c-h c-flex-column c-flex-center c-w50 c-br-tl36 c-br-bl36">
                  <span class="c-fs22 c-lh">{{'￥' | iosPriceFilter}}{{calculationPrice}}</span>
                  <span class="c-fs20 c-lh c-mt4">{{getBuyBtnTitle}}</span>
                </div>
                <div @click="goBuy(-1,clockInInfo.collage.collageId)" v-if="clockInInfo.collage.userType == -1" class="theme-bg-gradient c-flex-grow1 c-w0 c-fc-white c-h c-flex-row c-flex-center c-w50">发起拼团</div>
              </div>
              <!-- <div v-if="clockInInfo.collage.userType != -1" @click="goCollageDetail(clockInInfo.collage.groupId,clockInInfo.collage.collageId)" class="c-hh64 c-fs24 theme-fc c-flex-row c-aligni-center c-pl48">拼团中...</div> -->
            </div>
            <div v-else-if="!clockInInfo.hasPermission && clockInInfo.collage && (clockInInfo.collage.status == 2 || clockInInfo.collage.status == 1) && clockInInfo.collage.userType != -1" class="c-hh64 c-flex-row c-flex-center c-w0 c-flex-grow1">
              <div class="c-hh64 c-flex-row c-flex-center c-flex-grow1" @click="goCollageDetail(clockInInfo.collage.groupId,clockInInfo.collage.collageId)">拼团中...</div>
            </div>
            <!-- 砍价信息不为空 -->
            <div class="c-w0 c-flex-grow1 c-flex-row c-hh64 c-br36 c-fs24 c-text-hidden" v-else-if="clockInInfo.bargain != null && !clockInInfo.hasPermission && (clockInInfo.payType == 2 || clockInInfo.payType == 4) && (clockInInfo.limitNum == 0 || clockInInfo.hasMan < clockInInfo.limitNum) && ((clockInInfo.bargain.status == 1 && clockInInfo.bargain.isPreheat == 1) || clockInInfo.bargain.status == 2)">
              <div class="c-bg-white theme-fc c-h c-flex-column c-flex-center c-w50 c-br-tl36 c-br-bl36" @click="clickBuy">
                <span class="c-fs22 c-lh">{{'￥' | iosPriceFilter}}{{calculationPrice}}</span>
                <span class="c-fs20 c-lh">{{getBuyBtnTitle}}</span>
              </div>
              <template v-if="clockInInfo.bargain.userType == -1">
                <div class="theme-bg-gradient c-flex-grow1 c-w0 c-fc-white c-h c-flex-column c-flex-center c-w50"
                  :class="(clockInInfo.bargain.status == 1 && clockInInfo.bargain.isPreheat == 1) ? 'c-bg-d7' : 'theme-bg-gradient'" @click="handleClickBargainDetail(clockInInfo.bargain.bargainId)">
                  <span class="c-fs22 c-lh">{{'￥' | iosPriceFilter}}{{Number(clockInInfo.bargain.reservePrice).toFixed(2)}}</span>
                  <span class="c-fs20 c-lh">砍价享</span>
                </div>
              </template>
              <!-- 未发起砍价 -->
              <template v-else-if="clockInInfo.bargain != null && !clockInInfo.hasPermission && (clockInInfo.payType == 2 || clockInInfo.payType == 4) && (clockInInfo.limitNum == 0 || clockInInfo.hasMan < clockInInfo.limitNum) && ((clockInInfo.bargain.status == 1 && clockInInfo.bargain.isPreheat == 1) || clockInInfo.bargain.status == 2)&&clockInInfo.bargain.userType == 1">
                <div class="c-hh64 c-flex-row c-flex-center c-flex-grow1" @click="handleClickBargainDetail(clockInInfo.bargain.bargainId)">正在砍价</div>
              </template>
            </div>
            <div v-else-if="clockInInfo.payType == 5&& clockInInfo.hasPermission" @click="clickAddEnter(1)" class="theme-bg c-fc-white c-lh c-w0 c-flex-grow1 c-flex-row c-flex-center c-hh64  c-fs28">进入打卡</div>
            <div v-else-if="clockInInfo.payType == 5&& !clockInInfo.hasPermission" @click="clickToast" class="theme-bg c-fc-white c-lh c-w0 c-flex-grow1 c-flex-row c-flex-center c-hh64 c-fs28">进入打卡</div>
            <div v-else-if="clockInInfo.payType == 6&&clockInInfo.isAssignUser==1" @click="clickAddEnter(1)" class="theme-bg c-fc-white c-lh c-w0 c-flex-grow1 c-flex-row c-flex-center c-hh64 c-fs28">进入打卡</div>
            <div v-else-if="clockInInfo.payType == 6&&clockInInfo.isAssignUser==0" class="c-bg-d7 c-fc-white c-lh c-w0 c-flex-grow1 c-flex-row c-flex-center c-hh64 c-fs28">该打卡指定用户参与</div>
            <!-- 未购买，人员已满 -->
            <div v-else class="c-bg-b3 c-fc-white c-lh c-w0 c-flex-grow1 c-flex-row c-flex-center c-hh64 c-fs28">打卡已满</div>
          </template>
          <template v-else>
            <div @click="clickActiviEnterClock" class="theme-bg c-fc-white c-lh c-w0 c-flex-grow1 c-flex-row c-flex-center c-hh64 c-br36 c-fs24">进入打卡</div>
          </template>
        </div>
      </slot>
    </bottom-buy-com>
    <share-masker :isShowShare="isShowShare" v-if="isShowShare" @closeShare="isShowShare=false;"></share-masker>
    <cj-popup v-model="showActivityTip" v-if="activityList.length > 0" round>
      <div class="c-ww520 c-bg-white c-pb40 c-textAlign-c">
        <div v-if="clockInInfo.isReMatch == 0">
          <p class="c-fc-xblack c-fs28 c-pt70">{{activityList[0].permissionType == 2 ? '活动签到后':'需购买配套课程后'}}</p>
          <p class="c-fs28 c-pt20 c-pb48">方可免费参与打卡</p>
        </div>
        <div v-else>
          <p class="c-fc-xblack c-fs28 c-pt70">您没有该打卡权限</p>
          <p class="c-fs28 c-pt20 c-pb48">请重新购买指定配套课程后参与打卡</p>
        </div>
        <div @click="clickShowStudyModal" class="c-ww220 c-mlr-auto c-hh60 c-flex-row c-flex-center c-br30 c-fs26 c-fc-white theme-bg">我知道了</div>
      </div>
    </cj-popup>
    <cj-popup v-model="showdatumModal" position="bottom" round v-if="relationData&&relationData.datums&&relationData.datums.length > 0">
      <div
        class="c-ph24 c-pt36 c-pb4 c-bg-white c-p c-pb40"
        v-if="relationData && relationData.datums.length > 0 && companyAuth.enableDatumModule == 1"
      >
        <h2 class="c-fs26 c-fc-xblack c-fw-b c-textAlign-c">关联资料</h2>
        <div class="c-pa c-p-t0 c-p-r16 c-hh76 c-fc-sgray c-flex-row c-flex-center c-fs24">
          <i class="iconfont show c-fs28 c-mr10" @click="showdatumModal = false">&#xe84e;</i>
        </div>
        <div
          class="c-flex-row c-aligni-start c-pt40"
          v-for="(item,index) in relationData.datums"
          :key="index"
          :class="(relationData.datums.length - 1) == index ? '' : 'bd-b1-f5'"
          @click="goDatum(item.datumId)"
        >
          <div class="c-ww180 c-hh120 c-flex-row c-flex-center c-br4 c-flex-shrink0 c-p">
            <div class="c-pa c-p-b6 c-p-r6 c-br8 c-flex-row c-flex-center c-translucent-balck60 c-fc-white c-fs16 c-ph8 c-hh24">资料</div>
            <img
              v-if="item.datumCover"
              class="c-maxh c-maxw imgCloseBig c-br4"
              :src="$addXossFilter(item.datumCover)"
              alt=""
            />
            <img
              v-else-if="OFFICE_TYPE.indexOf(item.format)"
              class="c-maxh c-maxw imgCloseBig c-br4"
              src="../../../assets/i/wap/datum/icon_doc.png"
              alt=""
            />
            <img
              v-else-if="IMG_TYPE.indexOf(item.format)"
              class="c-maxh c-maxw imgCloseBig c-br4"
              src="../../../assets/i/wap/datum/icon_pic.png"
              alt=""
            />
            <img
              v-else-if="AUDIO_TYPE.indexOf(item.format)"
              class="c-maxh c-maxw imgCloseBig c-br4"
              src="../../../assets/i/wap/datum/icon_audio.png"
              alt=""
            />
            <img
              v-else-if="VIDEO_TYPE.indexOf(item.format)"
              class="c-maxh c-maxw imgCloseBig c-br4"
              src="../../../assets/i/wap/datum/icon_video.png"
              alt=""
            />
            <img
              v-else
              class="c-maxh c-maxw imgCloseBig c-br4"
              src="../../../assets/i/wap/datum/icon_com.png"
              alt=""
            />
          </div>
          <div
            class="c-pl20 c-flex-grow1"
          >
            <div class="c-flex-column c-justify-sb imgSocailDiv c-hh120">
              <div class="c-fs24 c-fc-xblack c-fw400 c-text-ellipsis2">{{item.name}}</div>
              <div class="c-fs22 c-fc-gray c-flex-row c-justify-sb">
                <span class="c-fc-sorange">
                  <span
                    class="c-fc-sorange"
                    v-if="item.isSaleOnly == 1"
                  >
                    <span v-if="item.permission == 21||item.payType== 3">加密</span>
                    <span
                      v-else
                      class="c-fs22"
                    >
                      <template v-if="item.payType == 2">{{'￥' | iosPriceFilter(item.optimal)}}</template>
                      {{item.payType | priceValueFilter(item.price, 9, item.optimal)}}
                    </span>
                  </span>
                  <span
                    class="c-fc-sorange"
                    v-else
                  >关联售卖</span>
                </span>
                <span>{{item.hadDatums}}人下载</span>
              </div>
            </div>
          </div>
        </div>
      </div>
    </cj-popup>
    <cj-popup v-model="nexBuyInfo" position="bottom" round v-if="nexInfo" title="续费详情" :closeable="true" @closed="closeBuyInfo">
      <section class="c-ph24 c-pb44 c-bg-white">
        <div class="c-flex-row c-pt38">
          <div class="c-ww192 c-hh128 c-text-hidden c-br8">
            <CoverImg :coverSizeClass="'c-w100 c-h c-br16 c-text-hidden'" :imgClass="'c-br8'" :coverUrl="$addXossFilter(nexInfo.cover, require('@/assets/activity_defult.png'))" />
          </div>
          <div class="c-flex-grow1 c-pl20">
            <div class="c-flex-column c-justify-sb c-hh128">
              <div class="c-fs24 c-fw400 c-text-ellipsis1 c-fc-xblack c-fw600 c-ww380">
                {{nexInfo.name}}
              </div>
              <!-- payType：付款类型【1：免费；2：收费；3：密码支付】 -->
              <div class="c-fc-xblack c-fs20">
                打卡周期:{{nexInfo.startTime+'至'+nexInfo.endTime}}
              </div>
              <div class="c-flex-row c-aligni-center c-justify-sb">
                <div class="c-fc-gray c-fs20">
                  共{{nexInfo.allDay}}天
                </div>
              </div>
            </div>
          </div>
        </div>
        <div class="c-hh64 c-lh64 c-fc-white theme-bg c-br40 c-textAlign-c c-fs28 c-mt50" @click="clickBuy(1)">立即续费</div>
      </section>
    </cj-popup>
    <cj-popup v-model="showStudyModal" position="bottom" v-if="activityList.length > 0"><section class="c-ph24 c-pb10 c-bg-white">
      <div class="c-hh90 c-bd-b1 c-flex-row c-aligni-center">
        <span class="c-fs26 c-flex-grow1 c-w0">{{activityList[0].permissionType == 2 ? '购买所属的活动并签到':'购买以下任意产品，即可免费参与打卡'}}</span>
        <i @click="showStudyModal = false" class="iconfont c-fs14 c-ph20 c-pv20">&#xe61b;</i>
      </div>
      <div class="c-flex-row c-pt30" v-for="(item,index) in activityList" :key="index" @click="clickGoActivity(item.mainProdType, item.id)">
        <div class="c-ww150 c-hh75 c-text-hidden c-br8 c-p">
          <div class="c-pa c-p-t0 c-p-l0 c-br-br8 c-flex-row c-flex-center c-translucent-balck60 c-fc-white c-fs16 c-ph8 c-hh24">{{item.mainProdType==110||item.mainProdType==111||item.mainProdType==112?'课程':prodTypes[item.mainProdType]}}</div>
          <img :src="$addXossFilter(item.cover, require('@/assets/activity_defult.png'))" class="c-w100 c-br8" alt="">
        </div>
        <div class="c-flex-grow1 c-w0 c-flex-row c-aligni-center c-pb30 c-pl20" :class="index == activityList.length - 1? '':'c-bd-b1'">
          <div class="c-flex-grow1 c-w0 c-pr20 c-hh75 c-flex-column c-justify-sb">
            <div class="c-fs24 c-fw400 c-text-ellipsis1">
              {{item.name}}
            </div>
            <!-- payType：付款类型【1：免费；2：收费；3：密码支付】 -->
            <div class="theme-fc c-fs20" v-if="prodTypes[item.mainProdType]=='直播'">
              <span v-if="item.payType == 2 && Number(item.price) != 0">{{'￥' | iosPriceFilter('Live')}}</span>
              <span>{{item.payType | priceValueFilter(item.price, item.prodType)}}</span>
            </div>
            <div class="theme-fc c-fs20" v-else><span v-if="item.price != '0.00~0.00'">{{'￥' | iosPriceFilter}}</span>{{item.price == '0.00~0.00' ? '免费' : item.price | moneyStr}}</div>
          </div>
          <i class="iconfont c-fs16 c-fc-sgray">&#xe85a;</i>
        </div>
      </div>
    </section>
    </cj-popup>
    <coupon-list-com
      @closeModal="closeModal"
      @getCouponList="getCouponList"
      :couponIsPage="couponIsPage"
      :couponLoading="couponLoading"
      :couponList="couponList"
      :showCoupon="showCoupon"
      :dataInfo="clockInInfo"
      :chainInfo="chainInfo"
      :isMarketing="isMarketing"
      :prodId="Number(cId)"
      :prodType="41"
      :sales="clockInInfo.sales"
    >
    </coupon-list-com>
    <offical-account v-if="clockInInfo && clockInInfo.bargain" :showAccountQcode="showAccountQcode" :desc="officalDesc" :imgSrc="$addXossFilter(mpQrcode)" @hideDialog="hideDialog"></offical-account>
    <!-- 视频播放器 -->
    <!-- <div @click.self="clickCloseVideo($event)" v-show="showVideo" class="c-pf c-p-t0 c-translucent-balck80 c-w100 c-h c-pt180">
      <div id="myVideo" style="width:100%; height:auto;"></div>
    </div> -->
    <!-- 入群引导 -->
    <group-guidance ref="guidance" position="bottom" :isType="true" :groupObject="clockInInfo.guideData" :startAt="clockInInfo.startAt"></group-guidance>
    <promote-income v-if="showProtoIncome && clockInInfo && clockInInfo.isSaleOut != 0 && cId && (showMarketingCard || showInvitionCard)" :showInvitionCard="showInvitionCard" :showMarketingCard="showMarketingCard" :prodId="cId" :prodType="cfrom.clockIn" @goInvite="goSpread" @goMarketingPoster="invitePoster"></promote-income>
    <collage-grades ref="collageGrades" :relType='5' :refereeId="refereeId" :isRelForm="clockInInfo.isRelForm && !clockInInfo.hasFormLog" :extId="cId" :bindPhoneSetting="bindPhoneSetting" :goodsRoomId="goodsRoomId" :dataInfo="clockInInfo"></collage-grades>
    <comfirm-com :showPassword.sync="showPassword" :pwTip="clockInInfo.pwTip" text="输入密码进入打卡" @submitPassword="submitPassword"></comfirm-com>
  </div>
</template>

<script>
import CoverImg from '@/components/templates/common/coverImg.vue';
import ComfirmCom from "@/components/templates/common/comfirmCom.vue";
import MySmallTabbar from "@/components/templates/common/MySmallTabbar.vue";
import shareMasker from "@/components/templates/common/shareMasker.vue";
import ActiveAndColumn from "@/components/templates/activeAndColumn.vue";
import commentCom from "@/components/templates/common/commentCom.vue";
import couponListCom from "@/components/templates/couponListCom.vue";
import FlashSalesTimeNew from "@/components/templates/flashSalesTimeNew.vue";
import CollagePersonsList from "@/components/templates/collage/collagePersonsList.vue";
import bargainRules from '@/components/templates/bargain/bargainRules';
import officalAccount from '@/components/templates/common/officalAccount';
import { utilJs } from "@/utils/common.js";
import { goDetails } from "@/utils/goDetails.js";
import { getBindPhoneSetting } from "@/utils/checkUnBindPhone.js";
import BottomBuyCom from "@/components/templates/common/bottomBuyCom.vue";
import groupGuidance from '@/components/templates/common/groupGuidance.vue'
import PromoteIncome from '@/components/templates/common/promoteIncome.vue';
import PriceBar from '@/components/templates/common/priceBar.vue';
import DiscountInfo from "@/components/templates/common/discountInfo.vue";
import VipEntry from "@/components/templates/common/vipEntry.vue";
import InviteGroup from "@/components/templates/common/inviteGroup.vue";
import formEntry from "@/components/homePage/form/formEntry.vue";
import collageGrades from "@/components/templates/collage/collageGrades.vue";
import courseDescription from '@/components/templates/courseDescription';
//const clientW = document.documentElement.clientWidth > 640 ? 640 - 48 : document.documentElement.clientWidth - 48; //屏幕宽度
//const videoH = clientW / 320 * 180; //视频高度
let clockInId = "";
let isLoading = false;

const THEME_RGB_MAP = global.THEME_RGB_MAP;
export default {
  name: "ClockInDetail",
  components: {
    ComfirmCom,
    formEntry,
    DiscountInfo,
    VipEntry,
    MySmallTabbar,
    commentCom,
    ActiveAndColumn,
    shareMasker,
    InviteGroup,
    PriceBar,
    couponListCom,
    FlashSalesTimeNew,
    CollagePersonsList,
    bargainRules,
    officalAccount,
    BottomBuyCom,
    groupGuidance,
    PromoteIncome,
    collageGrades,
    courseDescription,
    CoverImg
  },
  data() {
    return {
      showdatumModal:false,
      OFFICE_TYPE: ["doc", "docx", "pdf", "ppt", "pptx", "xls", "xlsx"],
      IMG_TYPE: [
        "bmp",
        "jpg",
        "png",
        "gif",
        "svg",
        "psd",
        "webp",
        "jpeg",
        "eps",
        "tga",
        "tiff"
      ],
      AUDIO_TYPE: [
        "ogg",
        "mp3",
        "wav",
        "asf",
        "wma",
        "mp3pro",
        "real",
        "ape",
        "module",
        "midi",
        "vqf"
      ],
      VIDEO_TYPE: [
        "avi",
        "wmv",
        "mpeg",
        "asf",
        "mpg",
        "dv",
        "rm",
        "rmvb",
        "mod",
        "flv",
        "mp4",
        "qt",
        "divx",
        "mkv",
        "vob"
      ],
      prodTypes: global.prodMapType, //配套课程。'110': '课程','111': '课程','112': '课程',
      companyAuth: JSON.parse(localStorage.getItem("companyAuth")),
      theme: localStorage.getItem("colorName") ? localStorage.getItem("colorName") : "mb5_default",
      showPassword: false, //显示密码
      inputPwd: '', //输入的密码
      showVideo: false,
      clockInInfo: {},
      isiOS: navigator.userAgent.indexOf('IOSLogin') > -1 || navigator.userAgent.indexOf('IOSNewLogin') > -1 || navigator.userAgent.indexOf("IOSNewApp") > -1,
      showShareMoneyTip: true,
      isShowShare: false,
      typeBar: 0,
      relationData: null,
      tabList: [{
        title: '详情',
        index: 0,
      }, {
        title: '评论',
        index: 2,
      }],
      DESCTIPTION_TYPE_MAP: {
        '9': '专栏',
        '11': '测评',
        '51': '直播',
        '110': '视频',
        '111': '音频',
        '112': '图文',
      },
      showActivityTip: false,
      showStudyModal: false,
      activityList: [],
      faStatus: 1,
      showCoupon: false,
      couponList: [],
      couponIsPage: false,
      couponPage: 1,
      couponLoading: false,
      isFirstJoin: false,
      isSales: false,
      vipType: localStorage.getItem("vipType" + localStorage.getItem("userId")),
      vipFitstItem: localStorage.getItem("vipArr1") ? JSON.parse(localStorage.getItem("vipArr1")) : null,
      svipFitstItem: localStorage.getItem("svipArr1") ? JSON.parse(localStorage.getItem("svipArr1")) : null,
      isOpenIosGzhPay: utilJs.isOpenIosGzhPay('41'), //打卡是否开启ios支付
      isSalesBegin: false, // 限时购是否正在进行
      cId: "",
      showAccountQcode: false,
      officalDesc: '关注我们后才可发起砍价哦',
      mpQrcode: '', //二维码图片
      commentStatus: 0,
      cfg: JSON.parse(localStorage.getItem("cfg")),
      isShowFormlg:localStorage.getItem("showForm") == 1 ? true : false,
      refereeId:'',
      bindPhoneSetting: null,
      cfrom: global.ckFrom, enableShowModuleView: localStorage.getItem("cfg") ? JSON.parse(localStorage.getItem("cfg")).enableShowModuleView : 1,
      enableHiddenModules: localStorage.getItem("cfg") ? JSON.parse(localStorage.getItem("cfg")).enableHiddenModules : [],
      showProtoIncome: false,
      chainInfo: '',
      isChainProd: false,
      optimal: null, // 最低价格对象
      nexBuyInfo:false,
      nexInfo:null
    };
  },
  computed: {
    showMarketingBar() {
      return this.clockInInfo &&
        (
          this.clockInInfo.sales ||
          (this.clockInInfo.bargain && ((this.clockInInfo.bargain.status == 1 && this.clockInInfo.bargain.isPreheat == 1) || this.clockInInfo.bargain.status == 2)) ||
          (this.clockInInfo.collage && (this.clockInInfo.collage.status == 2 || this.clockInInfo.collage.status == 1)) ||
          this.clockInInfo.isFriendHelper
        )
    },
    showInvitionCard() {
      let showInvitionCardTmp = !this.clockInInfo.isFriendHelper && !this.clockInInfo.collage && this.clockInInfo.sales == null && this.clockInInfo.bargain == null
      return showInvitionCardTmp
    },
    showMarketingCard() {
      let showMarketingCardTmp = this.clockInInfo.isFriendHelper || this.clockInInfo.sales || this.clockInInfo.collage || this.clockInInfo.bargain
      return showMarketingCardTmp;
    },
    //单卖&&没有权限&&价格大于0&&（加入形式&&不是好友助力）&&（优惠券||vip svip折扣信息||积分抵扣）&&（是否参与营销）
    showDiscount() {
      let showdiscount = this.clockInInfo.payType != 4 && this.clockInInfo.hasPermission == false && this.clockInInfo.payType != 1 && Number(this.clockInInfo.price) > 0
      return showdiscount
    },
    //大转盘是否显示
    showTurn() {
      let showturn = this.clockInInfo.joinActivityInfo && this.clockInInfo.joinActivityInfo.isJoinActivity == 1
      return showturn;
    },
    // 获取按钮专享价名称
    getBuyBtnTitle() {
      // 会根据是否开启ios支付区别文案展示
      let defaultTxt = '立即' + (this.isOpenIosGzhPay ? '购买' : '体验');
      if (this.optimal) {
        const agentName = utilJs.getCustNameMap();
        let btnTxt = '立即购买'
        let chainPrice = this.chainInfo && this.chainInfo.isChainProd ? (this.chainInfo.enableReorderDiscount == 1 && this.chainInfo.isReorder ? this.chainInfo.reorderBonus : this.chainInfo.enableOrderDiscount == 1 ? this.chainInfo.orderBonus : this.clockInInfo.price) : this.clockInInfo.price;
        let idDiscount = (this.vipType == 3 || this.vipType > 4) && this.clockInInfo.commonProdInfo && this.clockInInfo.commonProdInfo.agentDiscount < 100
          ? this.clockInInfo.commonProdInfo.agentDiscount
          : (this.vipType == 4 && this.clockInInfo.svipDiscount < 100)
            ? this.clockInInfo.svipDiscount
            : (this.vipType == 2 && this.clockInInfo.vipDiscount < 100)
              ? this.clockInInfo.vipDiscount
              : 100
        let discountPrice = Number(this.clockInInfo.price * idDiscount / 100).toFixed(2);
        if (this.chainInfo && this.chainInfo.isChainProd && Number(chainPrice) <= Number(discountPrice)) {
          let chainName = this.chainInfo.enableReorderDiscount == 1 && this.chainInfo.isReorder ? '复购' : (this.chainInfo.userType == 1 ? '普通用户' : this.chainInfo.userType2Name[this.chainInfo.userType])
          btnTxt = chainPrice != this.clockInInfo.price && chainName ? chainName + '专享价' : defaultTxt;
        } else {
          btnTxt = discountPrice * 1 != this.clockInInfo.price ? (this.vipType != 1 ? (this.vipType == 2 ? 'VIP专享价' : this.vipType == 4 ? 'SVIP专享价' : agentName[this.vipType] + '专享价') : defaultTxt) : defaultTxt;
        }
        if (this.clockInInfo.sales && this.optimal.optimalPriceType == 101) {
          btnTxt = defaultTxt;
        }
        return btnTxt
      }
      return defaultTxt
    },
    //营销原价计算价格
    calculationPrice() {
      let idDiscount = (this.vipType == 3 || this.vipType > 4) && this.clockInInfo.commonProdInfo && this.clockInInfo.commonProdInfo.agentDiscount < 100
        ? this.clockInInfo.commonProdInfo.agentDiscount
        : (this.vipType == 4 && this.clockInInfo.svipDiscount < 100)
          ? this.clockInInfo.svipDiscount
          : (this.vipType == 2 && this.clockInInfo.vipDiscount < 100)
            ? this.clockInInfo.vipDiscount
            : 100;
      let calculationPrice = Number(this.clockInInfo.price * idDiscount / 100).toFixed(2);
      if (this.optimal) {
        // 链动价格
        let chainPrice = this.chainInfo && this.chainInfo.isChainProd ? (this.chainInfo.enableReorderDiscount == 1 && this.chainInfo.isReorder ? this.chainInfo.reorderBonus : this.chainInfo.enableOrderDiscount == 1 ? this.chainInfo.orderBonus : this.clockInInfo.price) : this.clockInInfo.price;
        // 当链动价格存在且链动价格跟常规身份价格对比时，如果链动小于或者等于身份价格取链动价格
        calculationPrice = this.chainInfo && this.chainInfo.isChainProd && Number(chainPrice) <= Number(calculationPrice) ? chainPrice : calculationPrice;
        if (this.clockInInfo.isFriendHelper) {
          calculationPrice = Number(this.optimal.optimalPrice).toFixed(2);
        }
      }
      return calculationPrice;
    },
    //是否是营销活动
    isMarketing() {
      let isMarketing = this.clockInInfo &&
      (this.clockInInfo.sales ||
      (this.clockInInfo.collage &&
      (this.clockInInfo.collage.status == 2 || this.clockInInfo.collage.status == 1)) || this.clockInInfo.isFriendHelper || (this.clockInInfo.bargain
          && ((this.clockInInfo.bargain.status == 1 &&
            this.clockInInfo.bargain.isPreheat == 1) || this.clockInInfo.bargain.status == 2)))
      return isMarketing
    },
    //是否是营销活动
    isFavourable() {
      let isFavourable = this.clockInInfo && (this.clockInInfo.isFriendHelper || (this.clockInInfo.bargain && ((this.clockInInfo.bargain.status == 1 && this.clockInInfo.bargain.isPreheat == 1) || this.clockInInfo.bargain.status == 2)))
      return isFavourable
    },
    // 显示评论模块判断
    isShowComments() {
      return (type) => {
        if (!(this.cfg && this.cfg.enableComment == 1 && this.cfg.enableSignCardComment == 1 && this.commentStatus == 1)) return
        let isShowComment = false;
        if (type == 'icon' && this.cfg.enableCommentBottom == 1 && this.cfg.enableCommentTag != 1 && this.typeBar != 2) {
          isShowComment = true;
        } else if (type == 'tag' && this.cfg.enableCommentTag == 1 && this.typeBar == 2) {
          isShowComment = true;
        } else if (type == 'detail' && this.cfg.enableCommentBottom == 1) {
          isShowComment = true;
        } else {
          isShowComment = false;
        }
        return isShowComment;
      }
    },
    showInviteGroup() {
      let showPosition = this.clockInInfo && this.clockInInfo.guideData && (this.clockInInfo.guideData.showPosition == 3 || (this.clockInInfo.guideData.showPosition == 1 && (!this.clockInInfo.hasPermission || this.clockInInfo.payType == 1)) || (this.clockInInfo.guideData.showPosition == 2 && this.clockInInfo.hasPermission))
      let inviteGroup = this.clockInInfo && this.clockInInfo.guideData && showPosition && this.clockInInfo.guideData.isOpenGuide == 1 && this.clockInInfo.guideData.guideType.includes(1);
      return inviteGroup
    }
  },
  created() {
    utilJs.appShare(this);
  },
  methods: {
    addCommentSuccess() {
      // 确保详情tab下的评论列表和评论tab下的列表数据可以同时更新
      if (this.typeBar == 0 && this.$refs.commentCom) {
        this.$refs.commentCom.public_initData()
      }
      if (this.typeBar == 2 && this.$refs.detailCommentCom) {
        this.$refs.detailCommentCom.public_initData()
      }
    },
    getCommentCount(count = 0) {
      if (count && count > 0) {
        const index = this.tabList.findIndex(i => i.title == '评论')
        index > -1 && this.$set(this.tabList[index], "smallNum", count);
      }
    },
    addComment() {
      const index = this.tabList.findIndex(i => i.title == '评论')
      this.typeBar = index > -1 ? this.tabList[index].index : 0
      this.$nextTick(() => {
        if (index > -1 && this.$refs.commentCom) {
          this.$refs.commentCom.public_addComment()
        } else if (this.$refs.detailCommentCom) {
          this.$refs.detailCommentCom.public_addComment()
        }
      })
    },
    goDatum: function (id) {
      this.$routerGo(this, "push", { path: '/homePage/datum/datumDetail', query: { datumId: id } });
    },
    handleClickPlaint() {
      this.$store.commit('updateShowComplaint', true);
    },
    hideDialog() {
      this.showAccountQcode = false;
    },
    // 判断是否关注公众号
    checkUserIsFollowedMp() {
      let _this = this;
      return new Promise(function (resolve, reject) {
        utilJs.getMethod(`${global.apiurl}bargains/getMpData?bargainId=${_this.clockInInfo.bargain.bargainId}`,
          res => {
            resolve(res);
          },
          failRes => {
            reject(failRes)
          }
        )
      })
    },
    handleClickBargainDetail(bargainId) {
      if (this.clockInInfo.bargain.status == 1) {
        this.$showCjToast({
          text: '活动未开始，暂不能砍价！',
          type: 'warn'
        });
        return;
      }
      this.checkUserIsFollowedMp().then(res => {
        if (res.threshold == 2 && res.isFollowedMp == 0) {
          this.mpQrcode = res.mpQrcode;
          this.showAccountQcode = true;
          return;
        }
        // 判断是否绑定手机号
        if (this.bindPhoneSetting && this.bindPhoneSetting.buyBind) {
          if (utilJs.goBindMobile()) return;
        }
        if (this.clockInInfo.collectPage != 3 && this.clockInInfo.isRelForm == true && this.clockInInfo.hasFormLog == false && localStorage.getItem("showForm") == 1) {
            this.goForm(bargainId);
        } else {
          if (this.clockInInfo.bargain.status == 2) {
            this.$routerGo(this, "push", {
              path: "/homePage/bargain/bargainDetail",
              query: {
                bargainId: bargainId
              }
            });
          }
        }
      })
    },
    // 记录浏览数
    recordGlance() {
      if (isLoading) {
        return;
      }
      isLoading = true;
      utilJs.getMethod(`${global.apiurl}signCard/recordGlance/${clockInId}`, function (res) {
        isLoading = false;
      },
      failRes => {
        isLoading = false;
      }
      );
    },
    closeModal() {
      this.showCoupon = false;
    },
    //获取可以领取的优惠券
    getCouponList: function () {
      if (!this.couponLoading) {
        this.couponLoading = true;
        let $this = this;
        utilJs.getMethod(global.apiurl + 'redeemCodes/getCouponsByRedeemType?courseId=' + clockInId + '&redeemType=90&limit=10&page=' + this.couponPage, function (res) {
          $this.couponLoading = false;
          $this.couponList = res.data ? $this.couponList.concat(res.data) : [];
          $this.couponPage = res.next_page_url ? ($this.couponPage + 1) : $this.couponPage;
          $this.couponIsPage = res.next_page_url ? true : false;
        },
          failRes => {
            $this.couponLoading = false;
          }
        );
      }
    },
    //活动海报
    invitePoster: function () {
      if (this.bindPhoneSetting && this.bindPhoneSetting.shareBind) {
        if (utilJs.goBindMobile()) return;
      }
      let ckFrom = global.ckFrom.clockIn;//this.ckFrom;
      let type = this.clockInInfo.collage ? 3 : this.clockInInfo.sales ? 2 : this.clockInInfo.bargain ? 5 : 4;
      let cId = this.clockInInfo.isFriendHelper ? this.clockInInfo.faId : this.clockInInfo.collage ? this.clockInInfo.collage.collageId : this.clockInInfo.bargain ? this.clockInInfo.bargain.bargainId : this.clockInInfo.sales.pId;
      let proId = clockInId;
      this.$routerGo(this, "push", { path: '/homePage/spread/spreadPoster', query: { cId: cId, type: type, ckFrom: ckFrom, proId: proId } });
    },
    //助力详情
    goHelpDetail: function () {
      if (this.bindPhoneSetting && this.bindPhoneSetting.helpBind && utilJs.goBindMobile()) {
        return;
      }
      if (this.faStatus == 1) {
        this.$showCjToast({
          text: '活动未开始，暂不能助力领取！',
          type: 'warn'
        });
      } else {
        this.$routerGo(this, "push", {
          path: "/homePage/task/task",
          query: { 'faId': this.clockInInfo.faId, 'refereeId': localStorage.getItem("userId") }
        });
      }
    },
    // // 限时购倒计时
    falshSalesTime(status) {
      if (this.clockInInfo.sales) {
        this.clockInInfo.sales.sales.status = status
      } else if (this.clockInInfo.isFriendHelper) {
        this.faStatus = status;
      } else if (this.clockInInfo.bargain) {
        this.clockInInfo.bargain.status = status
      }
    },
    // // 限时购倒计时结束
    finishFlashSales(status) {
      if (this.clockInInfo.sales) {
        this.clockInInfo.sales.sales.status = status;
        if (status == 2) {
          this.isSales = true;
        }
      } else if (this.clockInInfo.isFriendHelper) {
        this.faStatus = status;
      } else if (this.clockInInfo.bargain) {
        this.getClockInDatail();
      }
      // 活动已结束，清空所有营销活动信息及状态
      if (status == -1) {
        this.clockInInfo.sales = null;
        this.isSales = false;
        this.clockInInfo.isFriendHelper = false;
      }
    },
    gcd: function (cinfo) {
      this.goCollageDetail(cinfo.groupId, cinfo.collageId);
    },
    //拼团详情
    goCollageDetail: function (groupId, collageId) {
      if (this.clockInInfo.collage.userType != -1 && this.clockInInfo.collage.groupId != groupId) {
        this.$showCjToast({
          text: '您已在拼团中，不需要再去拼单啦！',
          type: 'warn'
        });
      } else {
        if (this.clockInInfo.collage.status == 1) {
          this.$showCjToast({
            text: '活动未开始，暂不能拼团！',
            type: 'warn'
          });
        } else {
          let hfs = this.clockInInfo.isRelForm && !this.clockInInfo.hasFormLog;
          let pathQuery = {
            'groupId': groupId,
            'collageId': collageId,
            isRelForm: hfs,
            extId: clockInId,
            relType: 5,
          };
          if (this.goodsRoomId) {
            pathQuery.goodsRoomId = this.goodsRoomId;
          }
          this.$routerGo(this, "push", {
            path: "/homePage/collage/collageDetail",
            query: pathQuery
          });
        }
      }
    },
    goBuy: function (groupId, collageId) {
      if (this.clockInInfo.collage.userType != -1 && this.clockInInfo.collage.groupId != groupId) {
        this.$showCjToast({
          text: '您已在拼团中，不需要再去拼单啦！',
          type: 'warn'
        });
      } else {
        if (this.clockInInfo.collage.status == 1) {
          this.$showCjToast({
            text: '活动未开始，暂不能拼团！',
            type: 'warn'
          });
        } else {
          //要加判断是否选择阶梯
          if (this.clockInInfo.collage && this.clockInInfo.collage.collageGroupType == 1 ) {
            this.$refs.collageGrades.goChoseBuy()
          } else {
            this.$refs.collageGrades.showBuy()
            // this.isShowBuy = true; //选择阶梯
          }
        }
      }
    },
    //点击进入打卡
    clickShowStudyModal() {
      this.showActivityTip = false;
      if (this.activityList.length > 1) {
        this.showStudyModal = true;
      } else {
        this.clickGoActivity(this.activityList[0].mainProdType, this.activityList[0].id)
      }
    },
    //我知道了
    clickActiviEnterClock() {
      if (this.clockInInfo.isReMatch == 1) {
        this.showActivityTip = true;
      }
      if (this.clockInInfo.isTeacher == 1 || this.clockInInfo.isTeacher == 2) {
        this.clickEnterCourse();
      } else {
        if (this.clockInInfo.hasPermission && this.clockInInfo.isBuy == 1) {
          this.enterClock();
        } else {
          this.showActivityTip = true;
        }
      }
    },
    clickGoActivity(type, id) {
      let courseType = type == 110 ? 0 : type == 111 ? 1 : type == 112 ? 2 : '';
      let prodType = type == 110 || type == 111 || type == 112 ? global.ckFrom.course : type;
      goDetails(this, prodType, id, '', courseType)
    },
    handleShowGuidePop() {
      // 显示入群引导
      this.$refs.guidance.isShowPop();
    },
    changeType(index) {
      this.typeBar = index;
    },

    //点击奖金细则
    clickGoRules() {
      this.$routerGo(this, "push", {
        path: `/homePage/clockIn/bonusRules?workType=${this.clockInInfo.type}`
      });
    },
    getCommentStatus() {
      this.commentStatus = 0;
      if (this.cfg && this.cfg.enableComment == 1 && this.cfg.enableSignCardComment == 1) {
        this.commentStatus = 1;
        this.$nextTick(() => {
          this.$refs.commentCom && this.$refs.commentCom.public_initData()
          this.$refs.detailCommentCom && this.$refs.detailCommentCom.public_initData()
        })
      }
    },
    getRelevance() { // 获取关联数据
      let postData = {
        objId: clockInId,
        ckFrom: global.ckFrom.clockIn,
      }
      utilJs.postMethod(`${global.apiurl}common/relevance`, postData, (res) => {
        this.relationData = res;
        if (this.cfg && this.cfg.enableComment == 1 && this.cfg.enableCommentTag == 1 && !this.$isStore() && this.cfg.enableSignCardComment == 1) {
          this.tabList.push({
            title: '评论',
            index: 2,
            smallNum: 0,
          })
        }
      }
      );
    },
    //关联活动列表
    getActivityList() {
      utilJs.getMethod(`${global.apiurl}matchRelate/getMainList?prodType=41&prodId=${clockInId}`, (res) => {
        this.activityList = [...this.activityList, ...res.matchList];
        // 拼团
        //已过期的不展示拼团信息
        //关联活动或者训练营的打卡，不展示拼团信息
        if (this.clockInInfo.collage != null && this.companyAuth.enableCollage == 1 && this.clockInInfo.isExpire != 1 && (!this.activityList || this.activityList.length == 0)) {
          let nt = (new Date()).getTime();
          let st = utilJs.getTimeByDate(this.clockInInfo.collage.startTime);
          let et = utilJs.getTimeByDate(this.clockInInfo.collage.endTime);
          if (nt >= st && nt < et && this.clockInInfo.collage.status < 3) {
            this.clockInInfo.collage.status = 2;
          } else if (nt < st && this.clockInInfo.collage.status == 1) {
            this.clockInInfo.collage.status = 1;
          } else if (nt >= et && this.clockInInfo.collage.status == 2) {
            this.clockInInfo.collage.status = 3;
            this.clockInInfo.collage = null;
          } else {
            this.clockInInfo.collage = null;
          }
        } else {
          this.clockInInfo.collage = null;
        }
        // 好友助力 已过期、关联活动或者训练营的打卡，不展示好友助力信息
        if (this.clockInInfo.isFriendHelper && this.clockInInfo.isExpire != 1 && (!this.activityList || this.activityList.length == 0)) { //友情灌溉
          let stime = this.clockInInfo ? utilJs.getTimeByDate(this.clockInInfo.faStartAt) : 0;
          let etime = this.clockInInfo ? utilJs.getTimeByDate(this.clockInInfo.faEndAt) : 0;
          let nowTime = (new Date()).getTime();
          //faStatus 1未开始,2进行中,3已结束,4已停止
          if (stime > nowTime) {
            this.faStatus = 1;
          } else if (etime > nowTime) {
            this.faStatus = 2;
          }
        } else {
          this.clockInInfo.isFriendHelper = false;
        }
        // 限时折扣 已过期、关联活动或者训练营的打卡，不展示限时折扣信息
        if (this.clockInInfo.sales != null && this.clockInInfo.sales.status && (this.clockInInfo.sales.limit == 0 || this.clockInInfo.sales.balance > 0) && this.companyAuth.enableFlashSalesModule == 1 && this.clockInInfo.isExpire != 1 && (!this.activityList || this.activityList.length == 0)) {
          let nt = (new Date()).getTime();
          let st = utilJs.getTimeByDate(this.clockInInfo.sales.sales.startTime);
          let et = utilJs.getTimeByDate(this.clockInInfo.sales.sales.endTime);
          if (nt >= st && nt < et && this.clockInInfo.sales.sales.status > -1) {
            this.isSales = true;
            this.clockInInfo.sales.sales.status = 2;
          } else if (nt < st && this.clockInInfo.sales.sales.status == 1) {
            this.isSales = false;
            this.clockInInfo.sales.sales.status = 1;
            // $this.clockInInfo.sales = null;
          } else if (nt >= et && this.clockInInfo.sales.sales.status == 2) {
            this.clockInInfo.sales.sales.status = -1;
            this.clockInInfo.sales = null;
          } else {
            this.clockInInfo.sales = null;
          }
        } else {
          this.clockInInfo.sales = null;
        }
      });
    },
    //跳转至大转盘
    goTOturn() {
      let $this = this
      $this.$routerGo($this, "push", {
        path: "/homePage/marketing/turntable",
        query: {
          taId: $this.clockInInfo.joinActivityInfo ? $this.clockInInfo.joinActivityInfo.activityData.id : ''
        }
      });
    },
    //获取打卡信息
    getClockInDatail() {
      let $this = this
      utilJs.getMethod(global.apiurl + "signCard/detail/" + clockInId + '?refereeId=' + this.refereeId + '&isSkeleton=1', (res) => {
        if (res.length == 0) {
          this.$routerGo(this, "replace", {
              path: "/error/emptyPage",
              query: {
                from: "",
                info: "该打卡不存在，请联系管理员！"
              }
            });
            return
        }
        if ((res.status == 0 && (!res.hasPermission || res.isBuy == 0)) || res.status == -1) {
            this.$routerGo(this, "replace", {
              path: "/error/emptyPage",
              query: {
                from: "",
                info: res.status == -1 ? "该打卡已删除，请联系管理员！" : "该打卡已下架，请联系管理员！"
              }
            });
            return
          } else {
          this.companyAuth = JSON.parse(localStorage.getItem("companyAuth"));
          this.isFirstJoin = res.isFirstJoin;
          res.startHour = res.startHour ? res.startHour.substring(0, 5) : '00:00';
          res.endHour = res.endHour && res.endHour != '00:00:00' ? res.endHour.substring(0, 5) : '23:59';
          this.clockInInfo = res;
          this.optimal = res.optimal || null;
          let localCertArr = JSON.parse(localStorage.getItem("certArray"));
          if (!this.clockInInfo.hasPermission) {
            let curClockId = clockInId * 1;
            if (localCertArr && localCertArr.includes(curClockId)) {
              localCertArr.splice(localCertArr.indexOf(curClockId), 1)
              if (localCertArr && localCertArr.length > 0) {
                localStorage.setItem("certArray", JSON.stringify(localCertArr));
              } else {
                localStorage.removeItem("certArray");
              }
            }
            let localPointsArr = localStorage.getItem("showPointsArray");
            let pointsArr = localPointsArr ? JSON.parse(localPointsArr) : [];
            if (pointsArr && pointsArr.length > 0) {
              for (let i = 0;i < pointsArr.length;i++) {
                if (pointsArr[i].indexOf(curClockId) != -1) {
                  pointsArr.splice(pointsArr.indexOf(pointsArr[i]), 1)
                  i = i - 1
                }
              }
              localStorage.setItem("showPointsArray", JSON.stringify(pointsArr));
            } else {
              localStorage.removeItem("showPointsArray");
            }
          }
          this.activityList = res.relatedTraining;
          if ($this.clockInInfo.joinActivityInfo && $this.clockInInfo.joinActivityInfo.isShowDialog == 1) {
            $this.$cjConfirm({
              title: '', //
              titleCenter: true, //标题是否居中
              message: '恭喜！您获得了大转盘抽奖机会！',
              messageCenter: true, //内容是否居中
              showMasker: true, //是否显示透明背景
              clickCloseModal: false, //是否点击透明背景关闭弹窗
              showCancelButton: true, //是否显示取消按钮
              cancelButtonText: '稍后再说', //取消按钮文本
              confirmButtonText: '立刻前往', //确认按钮文本
              onConfirm() {
                $this.$routerGo($this, "push", {
                  path: "/homePage/marketing/turntable",
                  query: {
                    taId: $this.clockInInfo.joinActivityInfo ? $this.clockInInfo.joinActivityInfo.activityData.id : ''
                  }
                });
              }
            })
          }
          if (res.isHadGlance == 0 && res.isExpire == 0) {
            this.recordGlance();
          }
          const guideData = $this.clockInInfo.guideData || null;
          const showPosition = guideData && (guideData.showPosition == 3 || (guideData.showPosition == 1 && (!$this.clockInInfo.hasPermission || $this.clockInInfo.payType == 1)) || (guideData.showPosition == 2 && $this.clockInInfo.hasPermission))
          // partTake  ：  参与方式：1-任何人都可以参与 2-输入密码参与 3-普通收费 4-奖学金类型的收费方式 5-购买指定课程参与 6-指定用户参与
          console.log('ffffff', showPosition)
          if (!$this.clockInInfo.isTeacher && $this.$refs.guidance && guideData && guideData.isOpenGuide == 1 && guideData.guideType.includes(3) && showPosition) {
            console.log('ddddddd')
            utilJs.getLeadSocialLog($this.cfrom.clockIn, clockInId).then(dataRes => {
                if (!dataRes || dataRes == '') {
                  $this.$refs.guidance.isShowPop();
                  utilJs.saveLeadSocialLog($this.cfrom.clockIn, clockInId)
                }
              })
          }

          setTimeout(() => {
            this.showProtoIncome = true;
          }, 100);
          this.getCommentStatus();
          this.getRelevance();
          this.getActivityList();
          this.wechatShare();
        }
        if (res.sales && res.sales.sales) {
          this.isSalesBegin = (res.sales.sales.startTime).replace(/\s+|[-]|[:]/g, "") <= (utilJs.getNowTime()).replace(/\s+|[-]|[:]/g, "") ? true : false;
        }
        this.$nextTick(() => {
          this.$refs.descriptions.getDescptionDetail();
        })
      }
      );
    },
    closeBuyInfo() {
      this.nexBuyInfo = false
    },
    clickShowBuyInfo() {
      utilJs.getMethod(`${global.apiurl}signCard/nexPeriodRenew/${clockInId}`,
      res => {
        this.nexInfo = res
        this.nexBuyInfo = true
      })
    },
    //点击立即购买
    clickBuy(isNext) {
      if (!this.isOpenIosGzhPay) {
        this.$store.commit('updateShowVitualModal', true);
        return;
      }
      if (this.bindPhoneSetting && this.bindPhoneSetting.buyBind) {
        let pathQuery = {};
        if (this.goodsRoomId) {
          pathQuery.goodsRoomId = this.goodsRoomId;
        }
        if (utilJs.goBindMobile(pathQuery)) return;
      }
      if (this.clockInInfo.isBeBlackList) {
        this.$showCjToast({
          text: "很抱歉，你已被拉为黑名单",
          type: "warn"
        });
        return;
      }
      // 有关联表单，则跳到报名表单处
      if (!this.clockInInfo.isTeacher && this.clockInInfo.collectPage != 3 && this.clockInInfo.isRelForm == true && this.clockInInfo.hasFormLog == false && localStorage.getItem("showForm") == 1 && this.clockInInfo.isTeacher == 0) {
        this.goForm('', isNext);
      } else {
        let pathQuery = {
          extId: clockInId,
          ckFrom: global.ckFrom.clockIn,
          isFromInvite: 0,
          cId: -1,
          isFirstJoin: this.isFirstJoin,
        };
        if (this.isSales && this.optimal && this.optimal.optimalPriceType == 101) {
          pathQuery.ckFrom = global.ckFrom.flashSalesClockIn;
          pathQuery.pId = this.clockInInfo.sales.pId;
        }
        if (this.goodsRoomId) {
          pathQuery.goodsRoomId = this.goodsRoomId;
        }
        this.nexBuyInfo = false
        this.$routerGo(this, "push", {
          path: "/homePage/course/coursePay",
          query: pathQuery
        });
      }
    },
    //进入表单
    goForm(bargainId, isNext) {
      let pId = this.isSales ? this.clockInInfo.sales.pId : null;
      let isGoBack = (this.clockInInfo.hasPermission == true && isNext != 1)
      || this.clockInInfo.payType == 6 || this.activityList.length != 0
      || (this.isMarketing && !this.clockInInfo.sales) ||
      this.clockInInfo.payType == 3 ||
      this.clockInInfo.payType == 5 ||
      (!this.clockInInfo.hasPermission && this.clockInInfo.payType == 1 && (this.clockInInfo.limitNum == 0 || (this.clockInInfo.limitNum > 0 && this.clockInInfo.hasMan < this.clockInInfo.limitNum)))
      || ((this.clockInInfo.hasPermission && this.clockInInfo.isBuy == 1 && isNext != 1) || this.clockInInfo.isTeacher == 1 || this.clockInInfo.isTeacher == 2) ? 1 : 0;
      let cf = this.isSales ? global.ckFrom.flashSalesClockIn : global.ckFrom.clockIn;
      let pathQuery = {
        extId: clockInId,
        cId: -1,
        ckFrom: cf,
        isFromInvite: 0,
        relType: 5,
        type: 1,
        pId: pId,
        isGoBack: isGoBack,
        bargainId: bargainId
      };
      console.log(isNext, isGoBack)
      if (this.goodsRoomId) {
        pathQuery.goodsRoomId = this.goodsRoomId;
      }
      this.nexBuyInfo = false
      this.$routerGo(this, "push", { path: '/homePage/form', query: pathQuery });
    },
    //进入体验课
    clickEnterExperienceLesson() {
      if (this.bindPhoneSetting && this.bindPhoneSetting.getBind) {
        if (utilJs.goBindMobile()) return;
      }
      if (this.clockInInfo.isBeBlackList) {
        this.$showCjToast({
          text: "很抱歉，你已被拉为黑名单",
          type: "warn"
        });
        return;
      }
      this.$routerGo(this, "push", {
        path: `/homePage/clockIn/stuHomeWork?workType=3&fromDetail=1&clockInId=${clockInId}&curId=${this.clockInInfo.hwId}&isFirstJoin=${this.isFirstJoin}`
      });
    },

    goSpread() {
      if (this.bindPhoneSetting && this.bindPhoneSetting.shareBind) {
        if (utilJs.goBindMobile()) return;
      }
      this.$routerGo(this, "push", {
        path: "/homePage/spread/spreadCustom",
        query: {
          // socailId: this.socialInfo.socialRoomId
          ckFrom: global.ckFrom.clockIn,
          cId: 0,
          extId: clockInId
        }
      })
    },
    //直接进入打卡
    clickEnterCourse() {
      let that = this;
      if (this.clockInInfo.isBeBlackList) {
        that.$showCjToast({
          text: "很抱歉，你已被拉为黑名单",
          type: "warn"
        });
        return;
      }
      // let localTeacherList = localStorage.getItem("clockTeacherList");
      //教师身份并且
      // if (this.clockInInfo.isTeacher && !(localTeacherList && JSON.parse(localTeacherList).includes(clockInId))) {
      //   let teacherList = (localTeacherList && JSON.parse(localTeacherList)) || [];
      //   teacherList.length < 99999 ? teacherList.push(clockInId) : teacherList.shift();
      //   localStorage.setItem("clockTeacherList", JSON.stringify(teacherList));
      //   let contentTitle = this.clockInInfo.isTeacher == 1 ? '当前身份为教师，不能打卡，是否切换学员身份' : '当前身份为学员，不能评分，是否切换讲师身份';
      //   this.$cjConfirm({
      //     title: '提醒',
      //     message: contentTitle,
      //     onConfirm:() => {
      //       this.clickChangeRole();
      //     },
      //     onCancel:() => {
      //       this.enterClock();
      //     }
      //   })
      // } else {
        that.enterClock();
      // }
    },
    //讲师切换身份 1 讲师 2 学员
    clickChangeRole() {
      let postData = {
        signColId: clockInId,
        idType: this.clockInInfo.isTeacher == 1 ? 0 : 1, // 1：教师端 0：学生端
      }
      utilJs.postMethod(
        global.apiurl + "signCard/switchId", postData,
        res => {
          this.clockInInfo.isTeacher = postData.idType
          this.enterClock();
        });
    },
    enterClock() {
      if (!this.clockInInfo.isTeacher && this.clockInInfo.collectPage != 3 && this.clockInInfo.isRelForm == true && this.clockInInfo.hasFormLog == false && localStorage.getItem("showForm") == 1 && this.clockInInfo.isTeacher == 0) {
        this.goForm();
        return;
      }
      // if (this.clockInInfo.isTeacher == 1) {
      //   this.$routerGo(this, "push", {
      //     path: `/homePage/clockIn/teaHomeWorker?fromDetail=1&clockInId=${clockInId}`
      //   });
      //   return
      // }
      switch (this.clockInInfo.type) {
        case 1:
          //日历打卡,若当前日期不在开始日期和结束日期之间，则从开始日期进入，否则从当前日期进入
          let startTimeTamp = new Date(`${this.clockInInfo.startTime} ${this.clockInInfo.startHour}`.replace(/-/g, "/")).getTime();
          let endTimeTamp = new Date(`${this.clockInInfo.endTime} ${this.clockInInfo.endHour}`.replace(/-/g, "/")).getTime();
          let nowTimeTamp = new Date().getTime();
          let curTime = utilJs.dateFormat(nowTimeTamp);
          if (nowTimeTamp < startTimeTamp || nowTimeTamp > endTimeTamp) {
            curTime = this.clockInInfo.startTime;
          }
          this.$routerGo(this, "push", {
            path: `/homePage/clockIn/stuHomeWork?workType=1&fromDetail=1&clockInId=${clockInId}&curDate=${curTime}`
          });
          break;
        case 2:
          //作业打卡，如果超过一个作业，则进入作业列表，否则进入作业详情
          let nextUrl = `/homePage/clockIn/stuHomeWork?workType=2&fromDetail=1&clockInId=${clockInId}&curId=${this.clockInInfo.hwId}`;
          this.$routerGo(this, "push", {
            path: nextUrl
          });
          break;
        case 3:
          //闯关打卡
          this.$routerGo(this, "push", {
            path: `/homePage/clockIn/stuHomeWork?workType=3&fromDetail=1&clockInId=${clockInId}&curId=${this.clockInInfo.hwId}&isFirstJoin=${this.isFirstJoin}`
          });
          break;
      }
    },
    clickToast() {
      this.$showCjToast({
        text: "关联课程被删除或下架,请联系管理员重新设置",
        type: "warn"
      });
    },
    submitPassword(pwd) {
      this.clickAddEnter(2, pwd)
    },
    //添加记录后进入打卡
    clickAddEnter(addType, pwd = "") {
      if (isLoading) {
        return;
      }
      if (this.bindPhoneSetting && this.bindPhoneSetting.getBind) {
        if (utilJs.goBindMobile()) return;
      }
      if (this.clockInInfo.isBeBlackList) {
        this.$showCjToast({
          text: "很抱歉，你已被拉为黑名单",
          type: "warn"
        });
        return;
      }
      isLoading = true;
      let data = {
        signColId: clockInId,
        type: addType,
        password: addType == 2 ? pwd : '',
        refereeId:this.$route.query.refereeId || ''
      };
      utilJs.postMethod(global.apiurl + "signCard/buildRelated", data, (res) => {
        isLoading = false;
        this.clickEnterCourse();
      }, failRes => {
        isLoading = false;
      });
    },
    //输入密码进入
    clickPassword() {
      if (this.bindPhoneSetting && this.bindPhoneSetting.passwordBind) {
        if (utilJs.goBindMobile()) return;
      }
      if (this.clockInInfo.isBeBlackList) {
        this.$showCjToast({
          text: "很抱歉，你已被拉为黑名单",
          type: "warn"
        });
        return;
      }
      // 有关联表单，则跳到报名表单处
      if (this.clockInInfo.collectPage != 3 && this.clockInInfo.isRelForm == true && this.clockInInfo.hasFormLog == false && localStorage.getItem("showForm") == 1) {
        this.goForm()
        return;
      }
      this.showPassword = true;
    },

    initData() {
      isLoading = false;
      isLoading = false;
      this.typeBar = 0;
      this.showShareMoneyTip = true;
      this.showActivityTip = false;
      this.showStudyModal = false;
      this.showVideo = false;
      this.isShowShare = false;
      this.showPassword = false; //显示密码
      this.inputPwd = ''; //输入的密码
      this.relationData = null;
      this.clockInInfo = {};
      this.activityList = [];
      this.tabList = [{
        title: '详情',
        index: 0,
      }];
      this.cloroRGB = THEME_RGB_MAP[this.theme];
      this.faStatus = 1;
      this.isFirstJoin = 0;
      this.isSales = false;
      this.commentStatus = 0;
      this.chainInfo = '';
      this.isChainProd = false;
    },

    //分享
    wechatShare: function () {
      let title = this.clockInInfo.shareTitle;
      let shareImg = this.clockInInfo.sharePic;
      let shareUrl = `${window.location.href.split("#")[0]}#${this.$route.path}?clockInId=${clockInId}&refereeId=${localStorage.getItem("userId")}`;
      let shareDesc = this.clockInInfo.shareDesc || "点击查看详情";
      let shareData = {
        title: title,
        shareImg: shareImg,
        shareUrl: shareUrl,
        shareDesc: shareDesc
      };
      if (this.clockInInfo.sales) {
        title = '【限时抢购】' + title;
      }
      if (this.companyAuth.enableFriendHelper == 1 && this.clockInInfo.isFriendHelper == true) {
        title = '【快来帮我灌溉吧】' + title;
      }
      if (this.clockInInfo.bargain != null && ((this.clockInInfo.bargain.status == 1 && this.clockInInfo.bargain.isPreheat == 1) || this.clockInInfo.bargain.status == 2)) {
        title = `【邀您一起砍价】${title}`;
      }
      if (this.clockInInfo.collage != null && (this.clockInInfo.collage.status == 2 || this.clockInInfo.collage.status == 1)) {
        title = `【邀您一起拼团】${title}`;
      }
      localStorage.setItem("homeWorkShareInfo", JSON.stringify(shareData));
      utilJs.wechatConfig(shareUrl, title, shareImg, shareDesc);
    },
    //手机端分享
    appShare: function () {
      let title = this.clockInInfo.name;
      let shareImg = this.clockInInfo.sales && this.clockInInfo.sales.shareImg ? this.clockInInfo.sales.shareImg : this.clockInInfo.cover;
      let shareUrl = `${window.location.href.split("#")[0]}#${this.$route.path}?clockInId=${clockInId}&refereeId=${localStorage.getItem("userId")}`;
      let shareDesc = this.clockInInfo.shareDesc || "点击查看详情";
      if (this.clockInInfo.sales) {
        title = '【限时抢购】' + title;
      }
      if (this.companyAuth.enableFriendHelper == 1 && this.clockInInfo.isFriendHelper == true) {
        title = '【快来帮我灌溉吧】' + title;
      }
      if (this.clockInInfo.bargain != null && ((this.clockInInfo.bargain.status == 1 && this.clockInInfo.bargain.isPreheat == 1) || this.clockInInfo.bargain.status == 2)) {
        title = `【邀您一起砍价】${title}`;
      }
      if (this.clockInInfo.collage != null && (this.clockInInfo.collage.status == 2 || this.clockInInfo.collage.status == 1)) {
        title = `【邀您一起拼团】${title}`;
      }
      utilJs.appShareTrue(title, shareImg, shareUrl, shareDesc);
    }
  },
  activated() {
    setDocumentTitle("打卡详情");
    clockInId = this.$route.query.clockInId;
    this.cId = clockInId;
    this.goodsRoomId = this.$route.query.goodsRoomId || '';
    this.refereeId = this.$route.query.refereeId || '';
    this.couponPage = 1;
    this.couponIsPage = false;
    this.couponLoading = false;
    this.showCoupon = false;
    this.couponList = [];
    this.showProtoIncome = false;
    this.initData();
    getBindPhoneSetting(global.ckFrom.clockIn).then(res => {
      this.bindPhoneSetting = res;
    });
    utilJs.getChainInfo(this.cfrom.clockIn, clockInId).then(res => {
      this.chainInfo = res;
      this.isChainProd = this.chainInfo && this.chainInfo.isChainProd;
    });
    this.getClockInDatail();
    this.getCouponList();
  },
  deactivated() {
    this.showProtoIncome = false;
    this.nexBuyInfo = false
  }
};
</script>
<style scoped>
.yqAnimation {
  animation: yqAni 3s linear infinite;
  -webkit-animation: yqAni 3s linear infinite;
  -webkit-transform: translate3d(0, 0, 0);
  -moz-transform: translate3d(0, 0, 0);
  -ms-transform: translate3d(0, 0, 0);
  -o-transform: translate3d(0, 0, 0);
  transform: translate3d(0, 0, 0);
}
@keyframes yqAni {
  0% {
    width: 0.8rem;
  }
  8% {
    width: 0;
  }
  16% {
    width: 0.8rem;
  }
  100% {
    width: 0.8rem;
  }
}
.left-bg {
  padding-left: 0.2rem;
  padding-right: 0.2rem;
  height: 0.75rem;
  background: linear-gradient(90deg,#333333, rgba(51,51,51,0.7) 100%);
  border-radius: 0.15rem 0px 0.5rem 0.15rem;
  color: #F5D199;
}
.coupon-item {
  position: relative;
  border: none;
  color: #333;
}
.coupon-item:after{
  border-radius: 0.25rem;
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  border: 1px solid #333;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  width: 200%;
  height: 200%;
  -webkit-transform: scale(0.5);
  transform: scale(0.5);
  -webkit-transform-origin: left top;
  transform-origin: left top;
}
.cart-icon{
  background:rgba(255,255,255,0.92);
}
.closeBig >>> p > img,
.closeBig >>> section > img,
.closeBig >>> div > img,
.closeBig >>> img {
  pointer-events: none;
  -webkit-user-select: none;
  -moz-user-select: none;
  -webkit-user-select: none;
  -o-user-select: none;
  user-select: none;
}
.aCloseBig >>> p > a > img,
.aCloseBig >>> section > a > img,
.aCloseBig >>> div > a > img {
  pointer-events: none;
  -webkit-user-select: none;
  -moz-user-select: none;
  -webkit-user-select: none;
  -o-user-select: none;
  user-select: none;
}
.temp-style {
  border-bottom: 0.4rem solid #F5F7FA;
  border-top: none!important;
  padding: .2rem 0;
}
.explain-text {
  border-radius: 0.1rem;
  padding: 0.05rem 0.1rem;
  font-size: .4rem;
}
.c-bd-b16 {
  border-bottom: 0.4rem solid #F5F7FA!important;
}
.rela-style /deep/ .c-bd-b16-f5{
  border: none!important;
}
.bargain-style /deep/ .c-pv16{

  padding: 0!important;
}
.bargain-style /deep/ .c-bd-t12-f5{
  border-top: none!important;
}
.bargain-style /deep/ .c-ph24 {
  padding: 0!important;
}
.camp-guide {
  background: url("../../../assets/i/wap/course/group_guidance_bg.png") no-repeat;
  background-size: 100% 100%;
}
.fc-3F73F8 {
  color: #3F73F8;
}
.btn-wrap > div:first-child {
  color: #ff8831;
  color: var(--mb7color);
  background-color: rgba(255, 99, 45, 0.1);
  background-color: var(--rgba10color);
  border-bottom-left-radius: 0.9rem;
  border-top-left-radius: 0.9rem;
  border: 1px solid #ff8831;
  border: 1px solid var(--mb7color);
}
.btn-wrap > div:nth-child(2) {
  color: white;
  background-color: rgba(255, 99, 45, 0.5);
  background-color: var(--rgba50color);
  border-top: 1px solid #ff8831;
  border-top: 1px solid var(--mb7color);
  border-bottom: 1px solid #ff8831;
  border-bottom: 1px solid var(--mb7color);
}
.btn-wrap > div:last-child {
  color: white;
  background-color: #ff8831;
  background-color: var(--mb7color);
  border-bottom-right-radius: 0.9rem;
  border-top-right-radius: 0.9rem;
  border: none;
  border-top: none;
  border-bottom: none;
}
.theme-market .btn-wrap > div:first-child {
  background-color: var(--rgba10MarketColor);
  border: 1px solid var(--marketColor1);
  color: var(--marketColor1);
}
.theme-market .btn-wrap > div:nth-child(2) {
  background-color: var(--rgba50MarketColor);
  border-top: 1px solid var(--marketColor1);
  border-bottom: 1px solid var(--marketColor1);
  color: var(--marketColor1);
}
.theme-market .btn-wrap > div:last-child {
  background-image: -webkit-linear-gradient(0, var(--marketColor2) 0%, var(--marketColor1) 100%);
  color: #FFFFFF;
}
</style>